<template>
  <div class="progressBox">
    <div class="expectBox" :style="{ width: expectWidth }"><span v-show="isShowExpect">{{expect}}</span></div>
    <div class="realityBox" :style="{ width: realityWidth, backgroundColor: realityBg }"><span>{{reality}}</span></div>
  </div>
</template>

<script>
// import Progress from './progress';
// import api from '@/api/userConfig';

export default {
  name: 'boardProgress',
  props: {
    expect: Number,
    reality: Number,
    plan: Number,
  },
  components: {},
  data() {
    return {
      expectWidth: '',
      realityWidth: '',
      realityBg: '',
    };
  },
  watch: {
    expect: function(newVal) {
      this.formatStyle();
    },
    // reality: function(newVal) {
    //   this.formatStyle();
    // },
  },
  computed: {
    isShowExpect:function(){
      return this.expect > this.reality
    },
  },
  methods: {
    formatStyle() {
      if (this.reality > this.expect) {
        this.realityBg = '#00D98B';
      } else {
        this.realityBg = '#f03f58';
      }
      let expect = Math.ceil((parseInt(this.expect) / parseInt(this.plan)) * 100);
      let reality = Math.ceil((parseInt(this.reality) / parseInt(this.plan)) * 100);
      // this.expectWidth = Math.ceil((parseInt(this.expect) / parseInt(this.plan)) * 100) + '%';
      this.expectWidth = expect > 100 ? '100%' : `${expect}%`;
      // this.realityWidth = Math.ceil((parseInt(this.reality) / parseInt(this.plan)) * 100) + '%';
      this.realityWidth = reality > 100 ? '100%' : `${reality}%`;
    },
  },
  created() {},
  mounted() {
    this.formatStyle();
  },
  destroyed() {},
};
</script>

<style scoped="scoped" lang="less">
@import './style.less';
</style>
